import React, { FC, useState } from 'react'
const hello = 'hello'
import produce from 'immer'
console.log('hello world', hello)
import QuestionCard from './QuestionCard'
const List1: FC = () => {
  const add = () => {
    setQuestionList(
      produce(draft => {
        draft.push({ id: 'q5', title: '问卷5', isPublished: false })
      })
    )
  }
  const deleteQuestion = (id: string) => {
    setQuestionList(
      produce(draft => {
        const deleteIndex = draft.findIndex(item => {
          return item.id === id
        })
        draft.splice(deleteIndex, 1)
      })
    )
  }
  const publishQuestion = (id: string) => {
    setQuestionList(
      produce(draft => {
        const deleteItem = draft.find(item => {
          return item.id === id
        })
        if (deleteItem?.isPublished === false) {
          deleteItem.isPublished = true
        }
      })
    )
  }

  const List = [
    { id: 'q1', title: '问卷1', isPublished: true },
    { id: 'q2', title: '问卷2', isPublished: true },
    { id: 'q3', title: '问卷3', isPublished: true },
    { id: 'q4', title: '问卷4', isPublished: false },
  ]
  const [questionList, setQuestionList] = useState(List)

  return (
    <div>
      <h1>问卷调查123</h1>
      <div>
        {questionList.map(question => {
          const { id, title, isPublished } = question
          return (
            <QuestionCard
              key={id}
              id={id}
              title={title}
              isPublished={isPublished}
              deleteQuestion={deleteQuestion}
              publishQuestion={publishQuestion}
            ></QuestionCard>
          )
        })}
        <button onClick={add}>新增</button>
      </div>
    </div>
  )
}
export default List1
